<template>
  <div class="p-2">
    <el-card v-if="list.length > 0" v-loading="loading" shadow="never">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in list" :key="index" :span="12" style="padding: 10px">
          <el-card style="border-radius: 10px; background-color: #fbfbfb; position: relative">
            <view
              style="
                font-family: 'Arial Normal', 'Arial', sans-serif;
                font-family: '苹方-简 Bold', '苹方-简 常规体', '苹方-简', sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 16px;
                text-align: right;
              "
            >
              <view style="display: flex; position: relative; align-items: center">
                <view style="display: flex">
                  <!-- <el-image style="width: 140px" :src="item.realPictures" fit="contain" /> -->
                  <el-image style="width: 182px; height: 137px" :src="item.images" fit="fill" />
                </view>
                <view class="ml-20px" style="width: 580px; min-width: 300px">
                  <el-row style="margin-bottom: 20px">
                    <text class="font-600">宗地编号：</text>
                    <text>{{ item.parcelCode }}</text>
                  </el-row>
                  <el-row style="margin-bottom: 20px">
                    <text class="font-600">土地用途：</text>
                    <dict-tag :options="land_use" :value="item.landuse" />
                  </el-row>
                  <el-row>
                    <text class="font-600">项目名称：</text>
                    <text>{{ item.projectName }}</text>
                  </el-row>
                </view>
                <view class="ml-20px" style="display: flex; align-items: center">
                  <div class="flex" style="align-items: center">
                    <img id="u17_img" style="width: 40px; height: 40px" class="img" src="@/assets/icons/svg/u17.svg" />
                    <div id="u19_text" class="text ml-4" style="width: 150px">
                      <div style="color: #7f7f7f; font-weight: 800; text-align: left">土地面积</div>
                      <div style="font-size: 18px; text-align: left">
                        <span style="font-size: 26px; color: #d9001b; font-weight: bold">{{ item.landArea || '0.00' }}</span>
                        <span style="color: #7f7f7f">㎡</span>
                      </div>
                    </div>
                  </div>
                </view>
              </view>
              <view
                style="cursor: pointer; color: #f59a23; position: absolute; top: 10px; right: 10px; font-size: 14px; font-weight: bold"
                @click="handleOpenForm('detail', item.id)"
                >详情</view
              >
            </view>
          </el-card>
        </el-col>
      </el-row>
      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-empty v-else></el-empty>
    <informationForm ref="informationFormRef" />
  </div>
</template>

<script setup name="Information" lang="ts">
import { listByIds } from '@/api/system/oss';
import { listInformation } from '@/api/zichanguanli/information';
import informationForm from './form.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { land_use } = toRefs<any>(proxy?.useDict('land_use'));
const list = ref([]);
const total = ref(10);
const informationFormRef = ref(null);
const loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});

const handleIdGetImg = async (ids: string) => {
  if (!ids) return '';
  const res = await listByIds(ids);
  return res.data[0].url;
};

const handleOpenForm = (type: string, id: string | number) => {
  informationFormRef.value.open(type, id);
};

/** 查询土地信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await listInformation(queryParams.value);

  // list.value = res.rows.map(async (item: any) => {
  //   item.images = await handleIdGetImg(item.realPictures);
  //   // list.value.push(item);
  // });
  const processedList = await Promise.all(
    res.rows.map(async (item: any) => {
      item.images = await handleIdGetImg(item.realPictures);
      return item;
    })
  );
  list.value = processedList;
  total.value = res.total;
  loading.value = false;
};

onMounted(() => {
  nextTick(() => {
    getList();
  });
});
</script>
